<template>
  <div>
    <u-form-grid :data="formGrid" :filterParams="gridQueryParams" ref="child"></u-form-grid>
    <Modal
      v-model="attrOptionValueModal"
      :closable="true"
      :mask-closable="false">
      <template>
        <attr-option-value :filterParams="specQueryParams" v-if="attrOptionValueModal"></attr-option-value>
        <div slot="footer">
          <Button type="primary" @click="hiddenAttrOptionValueModal">关闭</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
  import AttrOptionValue from "./AttrOptionValue.vue";
  export default {
    name: 'Attribute',
    props: {
      filterParams: {
        type: Object,
        default: function () {
          return {}
        }
      },
    },
    components: {
      "AttrOptionValue": AttrOptionValue
    },
    watch: {
      //监听变量发生变化，将新的变量给查询参数。
      filterParams: {
        handler(curVal, oldVal) {
          this.gridQueryParams = curVal;
        },
        deep: true
      }
    },
    data() {
      return {
        gridQueryParams: {},
        //显示可选值模态窗口
        attrOptionValueModal: false,
        //查询规格可选值列表参数
        specQueryParams: {},
        formGrid: {
          options: {
            autoLoad:false,
            version: 'v2',
            url: {
              page: "/attribute/page",
              save: "/attribute/save",
              delete: "/attribute/delete",
            }
          },
          tips: {title: "类目属性管理", content: "定义每个类目下的属性项。"},
          form: {
            modal: {
              title: "类目属性"
            },
            columns: [
              {label: "属性名称", type: "text", name: "name", required: true},
              {label: "属性值", type: "text", name: "value",placeholder:"用于关系匹配使用"},
            ],
            submitBefore: (data) => {
              //临时从sessionStorage当中获取参数，避免从data当中无法获取值
              data["categoryId"] = window.sessionStorage.getItem("temp_categoryId") || null;
              console.log("data:%o", data);
              return true;
            },
          },
          table: {
            operation: {
              //调用查看、编辑、删除接口时，需要传递的参数主键名称，可以有多个。默认为id
              primaryKey: "id",
              buttons: [
                {
                  show: true, "label": "可选值列表", "theme": "primary", click: (row, index, _this) => {
                  this.showAttrOptionValueModal(row);
                }
                },
                {
                  key: "edit", show: true, "label": "编辑", "theme": "primary", click: (row, index, _this) => {
                  _this.optEditClick(row, index);
                }
                }, {
                  key: "delete", show: true, "label": "删除", "theme": "error", click: (row, index, _this) => {
                    _this.optDeleteClick(row, index);
                  }
                }],
              column: {
                title: '操作',
                key: 'action',
                width: 200,
              }
            },
            columns: [
              {title: '属性名称', key: 'name'},
              {title: '属性值', key: 'value'},
            ]
          }
        }
      }
    },
    created(){
      this.gridQueryParams = this.filterParams;
    },
    methods: {
      showAttrOptionValueModal(row) {
        this.$set(this.specQueryParams, "attrId", row.id);
        window.sessionStorage.setItem("temp_attrId", row.id);
        this.attrOptionValueModal = true;
      },
      hiddenAttrOptionValueModal() {
        this.attrOptionValueModal = false;
      },
    },
    mounted() {
      window.sessionStorage.setItem("temp_categoryId", null);
      this.$nextTick(function () {
        //添加监听器
        //table重新加载
        this.$on('reloadData', () => {
          this.$refs.child.$emit('reloadData');
        });
      })
    }
  }
</script>
